<mat-expansion-panel class="{{ 'ama-project-tree-filter ' + filter.type }}"
    [expanded]="expanded"
    [hideToggle]="true"
    (opened)="filterOpened(filter.type)"
    (closed)="filterClosed(filter.type)">

    <mat-expansion-panel-header [attr.data-automation-id]="'project-filter-' + filter.type">
        <div class="ama-project-tree-filter__container" [modelingsdk-active-class]="'ama-project-tree-filter__active'">
            <mat-icon class="ama-project-tree-filter__icon ama-filter-icon" *ngIf="!loading; else contentsAreLoading;">
                {{ filter.icon }}
            </mat-icon>
            <span class="ama-project-tree-filter__title">{{ filter.name | translate }}</span>
            <button mat-icon-button class="ama-project-tree-filter__create_button"
                    *ngIf="isAllowed(filter.type)" [disableRipple]="true"
                   (click)="openModelCreationModal($event)"
                [title]="'PROJECT_EDITOR.CREATE_NEW' | translate" [class]="'add-new-' + filter.type">
                <mat-icon>add</mat-icon>
            </button>
        </div>
    </mat-expansion-panel-header>

    <div class="ama-project-tree-filter__content" [attr.data-automation-id]="'project-filter-' + filter.type + '-container'">
        <ng-container *ngIf="!loading">
            <ng-container *ngIf="contentsByCategory">
                <div *ngFor="let contentByCategory of contentsByCategory" data-automation-id="ama-project-tree-filter-item-category">
                    <div *ngIf="contentByCategory.category" class="ama-project-tree-filter__category">
                        <span> {{ contentByCategory.category }}</span>
                    </div>

                    <div *ngIf="!contentByCategory.category" class="ama-project-tree-filter__category">
                        <span *ngIf="contentsByCategory.length > 1">
                            {{ "PROJECT_EDITOR.UNCATEGORIZED" | translate }}
                        </span>
                    </div>

                    <div *ngFor="let content of contentByCategory.items" data-automation-id="ama-project-tree-filter-contents-list">
                        <a
                            mat-button
                            [attr.data-automation-id]="filter.type + '-' + content.id"
                            class="ama-project-tree-filter__button"
                            [routerLink]="[filter.type, content.id]"
                            [routerLinkActive]="['active']"
                            [class.ama-project-tree-filter-global-item]="isScopeGlobal(content?.scope)"
                            [title]="content.name"
                        >
                            <span *ngIf="content.icon" class="ama-project-tree-filter__item_icon {{content.icon}}"></span>
                            <mat-icon *ngIf="!content.icon" class="ama-project-tree-filter__icon">{{ filter.icon }}</mat-icon>
                            <span class="{{ 'ama-project-tree-filter__name ' +  filter.type }}">{{ content.name }}</span>

                        </a>
                    </div>
                </div>
                <div class="ama-project-tree-filter__no-content" *ngIf="contentsAreEmpty()">
                    {{ 'PROJECT_EDITOR.NO_CONTENT' | translate }}
                </div>
            </ng-container>
        </ng-container>
        <ama-upload-file-button
            *ngIf="isAllowed(filter.type) && isUploadButtonEnabled(filter.type)"
            [attr.data-automation-id]="'upload-' + filter.type"
            [projectId]="projectId" [type]="filter.type">
        </ama-upload-file-button>
    </div>
</mat-expansion-panel>

<ng-template #contentsAreLoading>
    <div class="ama-project-tree-filter__spinner">
        <mat-spinner [diameter]="20" [strokeWidth]="2"></mat-spinner>
    </div>
</ng-template>
